<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <el-input v-model="query.name" placeholder="请输入学科名称" style="width: 300px; margin-right: 10px"/>
        <span>考试类型</span>
        <el-select v-model="query.examType" placeholder="请选择" style="margin-right: 10px">
          <el-option
            label="全部"
            value="all" />
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item"
            :value="item" />
        </el-select>
        <el-button type="primary" @click="queryList(1)">查询</el-button>
        <el-button style="float: right; padding: 3px 0" type="text" @click="dialogVisible = true">添加学科</el-button>
      </div>
      <el-table
        v-loading.body="queryLoading"
        :data="items"
        empty-text="暂无数据"
        style="width: 100%">
        <el-table-column
          :index="(query.page - 1) * query.size + 1"
          type="index"
          label="序号"
          width="100" />
        <el-table-column
          prop="name"
          label="学科名称"/>
        <el-table-column
          prop="examType"
          label="所属考试类型" />
        <el-table-column
          :formatter="toTime"
          prop="createTime"
          label="添加时间"/>
        <el-table-column
          :formatter="toTime"
          prop="updateTime"
          label="修改时间"/>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <!--<el-button type="text" size="small" @click="handleClick(scope.row)">删除</el-button>-->
            <el-button type="text" size="small" @click="editItem(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="query.page" :page-size="query.size" :total="total" layout="prev, pager, next" @current-change="queryList" />
      </div>
    </el-card>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      title="编辑"
      width="500px">
      <el-form ref="postForm" :model="postForm" :rules="rules">
        <el-form-item label-width="100px" label="考试类型" prop="examType">
          <el-select v-model="postForm.examType" placeholder="请选择" style="width: 100%">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item"
              :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px" label="学科名称" prop="name">
          <el-input v-model="postForm.name" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button :loading="addLoading" type="primary" @click="addType">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import Unix from '@/utils/unix'
import { resetJson } from '@/utils/reset'
export default {
  data() {
    return {
      items: [],
      dialogVisible: false,
      query: {
        name: '',
        examType: 'all',
        page: 1,
        size: 20
      },
      queryLoading: false,
      addLoading: false,
      total: 0,
      postForm: {
        id: '',
        name: '',
        examType: ''
      },
      options: ['护士执业', '初级护师', '主管护师', '临床执业医师', '临床助理医师', '执业中药师', '执业西药师', '乡村全科执业助理医师'],
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        examType: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.queryList(1)
  },
  methods: {
    toTime(row, column) {
      const date = row[column.property]
      return Unix.unixToTime(date)
    },
    /*
    *   点击关闭，清空输入框
    * */
    handleClose() {
      this.$refs.postForm.resetFields()
      resetJson(this.postForm)
      this.dialogVisible = false
    },
    addType() {
      this.$refs.postForm.validate((valid) => {
        if (valid) {
          this.addLoading = true
          axios.post('/saveSubjectCategory', this.postForm).then(res => {
            this.addLoading = false
            if (res.success) {
              this.handleClose()
              this.queryList(1)
            }
          })
        }
      })
    },
    editItem(row) {
      this.postForm.name = row.name
      this.postForm.examType = row.examType
      this.postForm.id = row.id
      this.dialogVisible = true
    },
    /*
    *   查询列表
    * */
    queryList(page) {
      this.query.page = page
      this.queryLoading = true
      const name = this.query.name ? this.query.name : 'all'
      const examType = this.query.examType ? this.query.examType : 'all'
      axios.get(`/getSubjectCategoryList/${name}/${examType}/${page}/${this.query.size}`).then(res => {
        this.queryLoading = false
        if (res.success) {
          this.items = res.data
          this.total = res.total
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
